<!--
 * @Author: 贺楠 1071780426@qq.com
 * @Date: 2024-03-25 17:36:53
 * @LastEditors: 贺楠 1071780426@qq.com
 * @LastEditTime: 2024-03-26 10:12:55
 * @FilePath: \newMould_BHZ\src\components\PCManage\img.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <!-- 小弹框 width:500,height:0.3,top:15%  -->
  <!-- 中弹框 width:800,height:0.5,top:10% -->
  <!-- 大弹框 width:1060,height:0.76,top:5% -->
  <!-- 超大弹框 width:1460,height:0.76,top:5% -->

  <div class="curveBox" v-viewer>
    
    <div v-for="(item,index) in src" :key="index">
      <div class="title">{{title[index]}}</div>
      <img :src="item"   />
    </div>
    
  </div>
</template>
<script>
export default {
  props: [
    "srcPath", //弹框是否展示
    "titleBox"
  ],
  data() {
    return {
      src: null,
      title:null
    };
  },
  components: {},
  watch: {
    srcPath: {
      handler(newVal) {
        this.src =[]
        if (newVal) {
          // this.src = newVal;
          newVal.map(item=>{
            this.src.push(item.url)
          })
        }
      },
      immediate: true,
    },
    titleBox: {
      handler(newVal) {
        this.title =[]
        if (newVal) {
          // this.src = newVal;
          newVal.map(item=>{
            this.title.push(item.fSection)
          })
        }
      },
      immediate: true,
    },
  },

  mounted() {},
  methods: {},
};
</script>
<style lang="less" scoped>
.curveBox {
  display: flex;
  flex-direction: column;

  width: 100%;
  .title {
    text-align: center;
  }
  // background: pink;
  img {
    height: 200px;
    margin: 10px;
    width: 98%;
    box-sizing: border-box;
  }
}
.curveBox /deep/ .viewer-footer {
  display: block !important;
}
</style>
